﻿<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<title>看板</title>
	<!-- bootstrap 样式文件 -->
	<link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/scanboard.css" />
	<link rel="stylesheet" type="text/css" href="css/animsition.css" />
	<link rel="stylesheet" type="text/css" href="css/jquery.shCircleLoader.css" />
	<script type="text/javascript" src="js/jquery.min.js"></script>

	<script type="text/javascript" src="bootstrap-4.6.2-dist/js/bootstrap.bundle.min.js"> </script>

	<script type="text/javascript" src="js/jquery.shCircleLoader-min.js"></script>
	<script type="text/javascript" src="js\flexible.js"></script>
	<script type="text/javascript" src="js/fontscroll.js"></script>

</head>

<body>
	<div id="loader"></div>
	<script type="text/javascript">
		$('#loader').shCircleLoader({
			color: "#00deff"
		});
	</script>
	<!--Top Start!-->
	<div class="scanboardWp animsition">
		<div id="top">
			<div class="wp clearfix">
				<div class="left pageTit">
					<!-- <a class="summaryBtn" href="javascript:;">各模块信息</a> -->
					<a class="summaryBtn" href="http://www.ch-xp.com/">首页</a>
				</div>
				<div class="center topLogo">
					<a href="http://www.ch-xp.com/"><img src="images/logo.png"></a>
				</div>
				<div class="right topBar">
					<div class="isFullDcreen">
						<img class="amplify" src="./images/amplify.svg" alt="">
						<img class="reduce" style="display: none;" src="./images/reduce.svg" alt="">
					</div>
					<div class="topTime">时间加载中...</div>
					<div class="clearfix exit-box">
						<!-- <a href="index.html" class="signOut fr">退出</a> -->
						<img src="./images/exit.svg" alt="">
						<!-- <div class="company fr">
							<h3 style="">选项</h3>
							<div class="dropdown">
								<a href="http://www.ch-xp.com/">官网</a>
							</div>
						</div> -->
					</div>
				</div>
			</div>
		</div>

		<!--Main Start!-->
		<div id="main" class="wp clearfix">
			<div class="left">
				<!--加氢机信息-->
				<div class="item waybill l-top-1">
					<div class="itemTit">
						<span class="border-yellow">加氢机信息</span>
					</div>
					<!-- <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top"
						title="Tooltip on top">
						Tooltip on top
					</button> -->
					<div class="no-bd">
						<ul>
							<li>加氢次数</li>
							<li>加氢总量</li>
							<li class="totalM3" data-toggle="tooltip" data-placement="top" title="标准状态下体积">
								加氢总体积</li>
						</ul>
					</div>
					<div class="no-hd">
						<ul class="detaile-box">
							<li>0<span></span></li>
							<li>0<span>kg</span></li>
							<li>0<span>m³</span></li>
						</ul>
					</div>
					<!-- <div class="itemCon itembg">
						<div class="progress" progress="80%">
							<h3 class="clearfix"><span>可用加氢机</span><i>80/100</i></h3>
							<div class="progressBar">
								<span></span>
							</div>
							<h4>0%</h4>
						</div>
					</div> -->
					<div>
						<div id="myChartPieAvailable"></div>
					</div>
				</div>

				<!-- 用户单月加氢占比 -->
				<div class="item waybill l-top-2">
					<div class="itemTit">
						<span class="border-yellow">用户单月加氢量（2023年3月）</span>
					</div>
					<div id="myChartPie"></div>
					<!-- <div class="itemCon itembg">
						<div class="progress" progress="5%">
							<h3 class="clearfix"><span>租户1</span><i>5</i></h3>
							<div class="progressBar">
								<span></span>
							</div>
							<h4>0%</h4>
						</div>
						<div class="progress" progress="40%">
							<h3 class="clearfix"><span>租户2</span><i>40</i></h3>
							<div class="progressBar">
								<span></span>
							</div>
							<h4>0%</h4>
						</div>
						<div class="progress" progress="75%">
							<h3 class="clearfix"><span>租户3</span><i>75</i></h3>
							<div class="progressBar">
								<span></span>
							</div>
							<h4>0%</h4>
						</div>
						<div class="progress" progress="100%">
							<h3 class="clearfix"><span>租户4</span><i>100</i></h3>
							<div class="progressBar">
								<span></span>
							</div>
							<h4>0%</h4>
						</div>
					</div> -->
				</div>
				<!--单日加氢总量-->
				<div class="item ">
					<div class="itemTit">
						<span class="border-blue">单日加氢总量</span>
					</div>
					<div id="myChart1"></div>
				</div>
			</div>

			<div class="center">
				<div class="centerWp">
					<!--中间大地图-->
					<div class="mapContainer">
						<div id="myMap" class="item"></div>
					</div>
					<!--加氢机实时数据-->
					<div class="item billChart">
						<div class="center-bottom-head">
							<div class="itemTit">
								<span class="border-blue">加氢机实时数据</span>
							</div>
							<!-- <small>(2023年12月)</small> -->
							<div class="real-time-box">
								<!-- 数据更新时间： 2023-12-05 11:23:54 -->
							</div>
							<select class="combox" id="machineCode" style="margin-right: 10px">
								<!-- 遍历后台数据显示 -->
								<!-- <option>zts1型号</option>
								<option>zts2型号</option>
								<option>zts3型号</option>
								<option>zts4型号</option> -->
							</select>
						</div>

						<!-- <div class="model">

						</div> -->
						<div class="center-bottom-box">
							<div class="c-b-l">
								<div class="c-b-l-top">
								</div>
								<div class="jq-img-box">
									<!-- 背景图片为加氢机 -->
									<img src="./images/jqj.jpeg" alt="">
								</div>
								<div class="jq-address">
								</div>
							</div>
							<div class="c-b-r " style="overflow: hidden;">
								<div class="item" style="border: none;box-shadow: none;background: none;">
									<div class="itemCon" style="padding: 0;">
										<div class="StateBox">
											<div class="table-box-r">
												<div class="table-head-r">
													<!-- <span>通信状态</span>
													<span>状态</span>
													<span>水压</span>
													<span>高压压力</span>
													<span>加氢口压力</span> -->
													<span>通信状态</span>
													<span>状态</span>
													<span>氢气泄漏浓度</span>
													<span>本次加氢量</span>
													<span>本次加氢时常</span>
												</div>
												<ul class="table-content-r">
													<li>
														<div class="table-content-item-r" id="table1">
															<!-- 动态插入数据 -->
															<!-- <span class="state-online">在线</span>
															<span class="state-success">正常</span>
															<span>0.00</span>
															<span>0.0</span>
															<span>0.0</span> -->
															<span>--</span>
															<span>--</span>
															<span>--</span>
															<span>--</span>
															<span>--</span>
														</div>
													</li>
												</ul>
											</div>
										</div>
									</div>
									<div style="border-top: 1px  dashed #013161;margin: 10px 0;">
										<!-- 分割线 -->
									</div>
									<div class="itemCon" style="padding: 0;">
										<div class="StateBox">
											<div class="table-box-r">
												<div class="table-head-r">
													<!-- <span>加氢压力</span>
													<span>入口水温</span>
													<span>出口水温</span>
													<span>加氢口温度 </span>
													<span>储氢温度</span> -->
													<span>气源压力</span>
													<span>管路压力</span>
													<span>加注口压力</span>
													<span>入口水温 </span>
													<span>出口水温</span>
												</div>
												<ul class="table-content-r">
													<li>
														<div class="table-content-item-r " id="table2">
															<!-- 动态插入数据 -->
															<!-- <span>0.00</span>
															<span>0.00</span>
															<span>0.00</span>
															<span>0.0</span>
															<span>0.0</span> -->
															<span>--</span>
															<span>--</span>
															<span>--</span>
															<span>--</span>
															<span>--</span>
														</div>
													</li>
												</ul>
											</div>
										</div>
									</div>
									<!-- <div style="border-top: 1px  dashed #013161;margin: 10px 0;">
									</div>
									<div class="itemCon" style="padding: 0;">
										<div class="StateBox">
											<div class="table-box-r">
												<div class="table-head-r ">
													<span>地址</span>
													<span></span>
													<span></span>
													<span></span>
													<span></span>
												</div>
												<ul class="table-content-r">
													<li>
														<div class="table-content-item-r" id="table3">
														</div>
													</li>
												</ul>
											</div>
										</div>
									</div> -->

									<!-- end -->
								</div>

							</div>
						</div>
						<!-- <ul class="data">
							<li><small>气源压力：</small><span>10pa</span></li>
							<li><small>加氢压力：</small><span>10pa</span></li>
							<li><small>出氢温度：</small><span>90℃</span></li>
							<li><small>加氢口压力：</small><span>10pa</span></li>
							<li><small>加氢温度：</small><span>70℃</span></li>
						</ul>
						<div class="btn-container">
							<img src="images\pid.png">
							<ul class="data1">
								<li><small>冷却水压力：</small><span>50pa</span></li>
								<li><small>进水温度：</small><span>100℃</span></li>
								<li><small>出水温度：</small><span>30℃</span></li>
							</ul>
						</div>
						<div class="data2">
							<li><small>氢气浓度传感器：</smalls><span>20mol/m³</span> <span>40mol/m³</span></li>
						</div> -->
					</div>
				</div>
			</div>

			<div class="right">
				<!--CO₂减排效果-->
				<div class="item waybill dxt">
					<div class="itemTit">
						<span class="border-yellow">CO₂减排效果</span>
					</div>
					<div class="tpf-content">
						<div class="no-bd">
							<ul>
								<!-- <li style="font-size: 0.22rem !important;font-weight: bold;" class="color-yellow-a"> -->
								<li style="cursor: pointer;" data-toggle="tooltip" data-placement="top" title="根据氢电转换平均效率计算">
									氢能发电总量</li>
								<!-- <li style="font-size: 0.22rem !important;font-weight: bold;" class="color-cyan"> -->
								<li style="cursor: pointer;" data-toggle="tooltip" data-placement="top" title="根据电力平均CO₂排放因子计算">
									累计CO₂减排量</li>
							</ul>
						</div>
						<div class="no-hd r-top-content">
							<ul>
								<!-- <li style="color: #fff;font-size: 0.19rem !important;font-weight: 100;">--</li>
								<li style="color: #fff;font-size: 0.19rem !important;font-weight: 100;">--</li> -->
								<li>--</li>
								<li>--</li>
							</ul>
						</div>
					</div>

				</div>

				<!-- 订单详情模态框start -->
				<div class="model-bg"></div>
				<div class="model-box" style="display: none;">
					<div class="model-tit">
						<div>订单详情</div>
						<div class="close-btn">
							×
						</div>
					</div>
					<div style="height: 1px;background-color: lightgray;margin: 20px 0;">

					</div>
					<div class="table-box">
						<div class="table-head">
							<span>加油机名称</span>
							<span>加油枪名称</span>
							<span>储氢模块名称</span>
							<span>订单编号</span>
							<span>单价/元</span>
							<span>总价/元</span>
							<span>加氢量/kg</span>
							<span>加注时间</span>
							<span>耗时/分钟</span>
							<span>所属机构</span>
						</div>
						<ul class="table-content">
							<li>
								<div class="table-content-item">
									<span>—</span>
									<span>—</span>
									<span>—</span>
									<span>—</span>
									<span>—</span>
									<span>—</span>
									<span>—</span>
									<span>—</span>
									<span>—</span>
									<span>—</span>
								</div>
							</li>
						</ul>
					</div>
					<div class="model-footer">
						<div class="model-confirm">确定</div>
						<!-- <div class="model-cancel">取消</div> -->
					</div>
				</div>
				<!-- 模态框end -->


				<!--当日订单-->
				<div class="item billState r-scroll-1">
					<div class="itemTit">
						<span class="border-green">当日订单</span>
					</div>

					<div class="itemCon">
						<div class="StateBox">
							<div class="StateTit time-head">
								<span>订单编号</span>
								<span>加氢量/kg</span>
								<span>单价/元</span>
								<span>总价/元</span>
							</div>
							<div id="FontScrollRt">
								<ul class="list-box">
									<!-- <li>
										<div class="fontInner clearfix time-item">
											<span>ZC1712120023</span>
											<span>500</span>
											<span>50</span>
											<span>150</span>
										</div>
									</li> -->
									<li style="text-align: center; color: #fff;margin-top: 40%;">
										暂无数据
									</li>
								</ul>
							</div>
						</div>
					</div>

				</div>

				<!--加氢机排名-->
				<div class="item billState r-scroll-2">
					<div class="itemTit">
						<span class="border-green">加氢机排名</span>
					</div>
					<div class="itemCon">
						<div class="StateBox">
							<div class="StateTit">
								<span>加氢机编号</span>
								<span>加氢量/kg</span>
								<span>营业额/元</span>
								<span style="width: 30% !important;">营业时长/日</span>
							</div>
							<div id="FontScroll">
								<ul class="refueling-no">
									<!-- <li>
										<div class="fontInner clearfix">
											<span>ZC1718</span>
											<span>12345</span>
											<span>5000</span>
											<span>2:15</span>
										</div>
									</li> -->
									<li style="text-align: center; color: #fff;margin-top: 40%;">
										暂无数据
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--Main End!-->
	</div>
	<div class="filterbg"></div>
	<div class="popup">
		<a href="javascript:;" class="popupClose"></a>
		<div class="summary">
			<div class="summaryTop">
				<div id="summaryPie1" class="summaryPie"></div>
				<div id="summaryPie2" class="summaryPie"></div>
				<div id="summaryPie3" class="summaryPie"></div>
			</div>
			<div class="summaryBottom">
				<div class="summaryBar">
					<div class="summaryTit">
						<img src="images/tit1.png">
					</div>
					<div id="summaryBar"></div>
				</div>

				<div class="summaryLine">
					<div class="summaryTit">
						<img src="images/tit2.png">
					</div>
					<div id="summaryLine"></div>
				</div>
			</div>
		</div>
	</div>
	<canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
</body>

<script type="text/javascript" src="js\flexible.js"></script>

<script type="text/javascript" src="js/jquery.animsition.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js\shine.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/scanboard.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=f8ffe058b8e6f5b05e8ff43ca4207393"></script>

</html>